<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- vue框架： 视图的双向绑定 -->
		<script type="text/javascript" src="js/vue-2.6.10.js"></script>
		<!--  axios: 进行异步请求（数据来源与网页脱离） -->
		<script type="text/javascript" src="js/axios.js"></script>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			a{
				text-decoration: none;
				font-size: 20px;
				color: #FEDA7A;
			}
			.content{
				border: 0 solid;
				margin: 0;
				padding: 50px 0;
				width: 100%;
				background:#FEDA7A;
				}
			.content1{
				border: 0 solid;
				border-radius:20px;
				margin: 0 auto;
				width: 1500px;
				height: 850px;
				padding: 50px 0;
				background: white;
			}
			.box{
				border: 0 solid;
				width: 500px;
				height:670px;
				margin:100px 0 ;
			}
			
			.box img{
				object-fit: fill;
				width: 500px;
				height:670px;
			}
			.tp{
				border: 0 solid;
				width: 500px;
				height: 800px;
				background:white;
				float: left;
				padding:0 20px
			}
			.zc{
				border: 0 solid;
				width: 900px;
				height: 800px;
				background: white;
				float:right;
				}
			h1{
				color:#FEDA7A;
			}
			input{
				width:300px;
				height:30px;
				line-height: 30px
				font-size : 16px;
				margin-top : 20px;
				padding : 8px 3px;
				padding-left : 50px;
			}
			button{
				width: 300px;
				height: 30px;
				line-height: 30px;
				margin-top: 30px;
				margin-bottom: 30px;
				background: #FEDA7A;
				border: 0 solid;
				color: aliceblue;
			}
			.border{
				border:3px solid #FEDA7A;
				border-radius:20px;
				width: 400px;
				background-color:#fffa;
				padding:auto;
				text-align:center;
				margin: auto;
				position: absolute;
				top: 40%;
				left: 50%;
			}
			p{
				margin: 10px;
			}
		</style>
	</head>
	<body>
	
		<div class="content">
			<div class="content1">
				<div class="tp">
					<div class="box">
						<img src="images/login1.jpg" alt="">
					</div>
				</div>
				<div class="zc">
					<div class='border'>
						<h1>登录页面</h1>
							<div class="container" id="from">
		<label for="uname"><b>用户名</b></label><br>
		<input type="text" placeholder="输入用户名" name="uname" v-model="username">
		<br>
		<label for="psw"><b>密码</b></label><br>
		<input type="password" placeholder="输入密码" name="psw" v-model="password">
		<br>
		<span v-text="msg"></span>
		<button type="button" v-on:click="login()">登录</button>
							</div>
							<p>
								没有账号？→
								<a href="register.html">去注册</a>
							</p>
					</div>
				</div>
			</div>
		</div>
		 <script type="text/javascript">
            let vue =new Vue({
                el:'#from',
                data:{
                    username:"",
                    password:"",
                    msg:""
                },
                created(){
                },methods:{
                    login:function(){
                        url = '/managerSystem/LoginServlet.do?username='+vue.username + '&password=' +vue.password;
                        axios.get(url).then(
                                function(res_obj){
                                vue.mag="";
            
                                if(res_obj.data){
                                    window.location.href="index.html";
                                }else{
                                    vue.msg="账号或者密码错误";
                                }
                            }
                        ).catch(
                                function(error_obj){
                                    alert("网络连接失败！！！");
                                }
                        )
                    }
                }    
            });
        </script>
	</body>
</html>